var canvasWidth = 877; // 声明画布的宽
var canvasHeight = 672; // 声明画布的高
var canvas = document.getElementById('canvas'); // 获取画布
var context = canvas.getContext('2d'); // 获取画布的上下文
canvas.width = canvasWidth;
canvas.height = canvasHeight;
var image = new Image(); // 声明图片
var radius = 50; // 声明半径
image.src = 'images/pic.png'; // 获取图片路径
image.onload = function() {
    initCanvas();
}

function initCanvas() {
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.save();
    context.beginPath();
    var x = Math.random() * (canvas.width - 2 * radius) + radius;
    var y = Math.random() * (canvas.height - 2 * radius) + radius;
    context.arc(x, y, radius, 0, 2 * Math.PI, true);
    context.clip();
    context.drawImage(image, 0, 0);
    context.restore();
    console.log('回复canvas之前保存的状态')
}

function reset() {
    initCanvas();
    console.log('想看我吗')
}

function show() {
    radius = 4 * Math.max(canvas.width, canvas.height);
    console.log(radius);
    initCanvas()
}